好的，以下是完整的客房类型管理页面代码，包括HTML、CSS和JavaScript部分。这个页面将显示客房类型、最大入住人数、床型、房间面积、是否含早餐、是否可吸烟、是否提供无线网络、价格范围、季节性折扣、促销活动以及操作列。

```html
<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-cn">

<head>
	<%@ include file="../../static/head.jsp"%>
	<!-- font-awesome -->
	<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/font-awesome.min.css">
</head>
<style>
	/* 在这里添加自定义的CSS样式 */
</style>
<body>
<!-- Pre Loader -->
<div class="loading">
	<div class="spinner">
		<div class="double-bounce1"></div>
		<div class="double-bounce2"></div>
	</div>
</div>
<!--/Pre Loader -->
<div class="wrapper">
	<!-- Page Content -->
	<div id="content">
		<!-- Top Navigation -->
		<%@ include file="../../static/topNav.jsp"%>
		<!-- Menu -->
		<div class="container menu-nav">
			<nav class="navbar navbar-expand-lg lochana-bg text-white">
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
						aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
					<span class="ti-menu text-white"></span>
				</button>
				<div class="collapse navbar-collapse" id="navbarSupportedContent">
					<ul id="navUl" class="navbar-nav mr-auto">
					</ul>
				</div>
			</nav>
		</div>
		<!-- /Menu -->
		<!-- Breadcrumb -->
		<!-- Page Title -->
		<div class="container mt-0">
			<div class="row breadcrumb-bar">
				<div class="col-md-6">
					<h3 class="block-title">客房类型管理</h3>
				</div>
				<div class="col-md-6">
					<ol class="breadcrumb">
						<li class="breadcrumb-item">
							<a href="${pageContext.request.contextPath}/index.jsp">
								<span class="ti-home"></span>
							</a>
						</li>
						<li class="breadcrumb-item"><span>客房类型管理</span></li>
						<li class="breadcrumb-item active"><span>客房类型列表</span></li>
					</ol>
				</div>
			</div>
		</div>
		<!-- /Page Title -->

		<!-- /Breadcrumb -->
		<!-- Main Content -->
		<div class="container">

			<div class="row">
				<!-- Widget Item -->
				<div class="col-md-12">
					<div class="widget-area-2 lochana-box-shadow">
						<h3 class="widget-title">客房类型列表</h3>
						<div class="table-responsive mb-3" id="tableDiv">
							<div class="col-sm-12">
								<label>
									客房类型
								</label>
								<input type="text" id="kefangleixingSearch" class="form-control form-control-sm" placeholder="请输入客房类型" aria-controls="tableId">

								<button onclick="search()" type="button" class="btn btn-primary">查询</button>
								<button onclick="add()" type="button" class="btn btn-success 新增">添加</button>
								<button onclick="deleteMore()" type="button" class="btn btn-danger 删除">批量删除</button>
							</div>
							<table id="tableId" class="table table-bordered table-striped">
								<thead>
								<tr>
									<th class="no-sort" style="min-width: 35px;">
										<div class="custom-control custom-checkbox">
											<input class="custom-control-input" type="checkbox" id="select-all" onclick="chooseAll()">
											<label class="custom-control-label" for="select-all"></label>
										</div>
									</th>
									<th onclick="sort('kefangleixing')">客房类型<i id="kefangleixingIcon" class="fa fa-sort"></i></th>
									<th onclick="sort('maxPeople')">最大入住人数<i id="maxPeopleIcon" class="fa fa-sort"></i></th>
									<th onclick="sort('bedType')">床型<i id="bedTypeIcon" class="fa fa-sort"></i></th>
									<th onclick="sort('roomArea')">房间面积<i id="roomAreaIcon" class="fa fa-sort"></i></th>
									<th onclick="sort('breakfastIncluded')">是否含早餐<i id="breakfastIncludedIcon" class="fa fa-sort"></i></th>
									<th onclick="sort('smokingAllowed')">是否可吸烟<i id="smokingAllowedIcon" class="fa fa-sort"></i></th>
									<th onclick="sort('wifiAvailable')">是否提供无线网络<i id="wifiAvailableIcon" class="fa fa-sort"></i></th>
									<th onclick="sort('priceRange')">价格范围<i id="priceRangeIcon" class="fa fa-sort"></i></th>
									<th onclick="sort('seasonalDiscount')">季节性折扣<i id="seasonalDiscountIcon" class="fa fa-sort"></i></th>
									<th onclick="sort('promotion')">促销活动<i id="promotionIcon" class="fa fa-sort"></i></th>
									<th>操作</th>
								</tr>
								</thead>
								<tbody>
								</tbody>
							</table>
							<div class="col-md-6 col-sm-3 z-pages" style="flex:none;max-width:inherit;display:flex;">
								<div class="dataTables_length" id="tableId_length">
									<select name="tableId_length" aria-controls="tableId" id="selectPageSize" onchange="changePageSize()">
										<option value="10">10</option>
										<option value="25">25</option>
										<option value="50">50</option>
										<option value="100">100</option>
									</select>
									<span class="text">条每页</span>
								</div>
								<nav aria-label="Page navigation example">
									<ul class="pagination justify-content-end">
										<li class="page-item" id="tableId_previous" onclick="pageNumChange('pre')">
											<a class="page-link" href="#" tabindex="-1">上一页</a>
										</li>
										<li class="page-item" id="tableId_next" onclick="pageNumChange('next')">
											<a class="page-link" href="#">下一页</a>
										</li>
									</ul>
								</nav>
							</div>
						</div>
					</div>
				</div>
				<!-- /Widget Item -->
			</div>
		</div>
		<!-- /Main Content -->

	</div>
	<!-- /Page Content -->
</div>
<!-- Back to Top -->
<a id="back-to-top" href="#" class="back-to-top">
	<span class="ti-angle-up"></span>
</a>
<!-- /Back to Top -->
<%@ include file="../../static/foot.jsp"%>
<script language="javascript" type="text/javascript" src="${pageContext.request.contextPath}/resources/My97DatePicker/WdatePicker.js"></script>

<script>
	<%@ include file="../../utils/menu.jsp"%>
	<%@ include file="../../static/setMenu.js"%>
	<%@ include file="../../utils/baseUrl.jsp"%>
	<%@ include file="../../static/getRoleButtons.js"%>
	<%@ include file="../../static/crossBtnControl.js"%>
	var tableName = "kefangleixing";
	var pageType = "list";
	var searchForm = { key: ""};
	var pageIndex = 1;
	var pageSize = 10;
	var totalPage = 0;
	var dataList = [];
	var sortColumn = '';
	var sortOrder= '';
	var ids = [];
	var checkAll = false;

	function init() {
		// 满足条件渲染提醒接口
	}
	// 改变每页记录条数
	function changePageSize() {
		var selection = document.getElementById('selectPageSize');
		var index = selection.selectedIndex;
		pageSize = selection.options[index].value;
		getDataList();
	}
	//排序
	function sort(columnName){
		var iconId = '#'+columnName+'Icon'
		$('th i').attr('class','fa fa-sort');
		if(sortColumn == '' || sortColumn != columnName){
			sortColumn = columnName;
			sortOrder = 'asc';
			$(iconId).attr('class','fa fa-sort-asc');
		}
		if(sortColumn == columnName){
			if(sortOrder == 'asc'){
				sortOrder = 'desc';
				$(iconId).attr('class','fa fa-sort-desc');
			}else{
				sortOrder = 'asc';
				$(iconId).attr('class','fa fa-sort-asc');
			}
		}
		pageIndex = 1;
		getDataList();
	}
	// 查询
	function search(){
		searchForm = { key: ""};
		if($('#kefangleixingSearch').val() != null && $('#kefangleixingSearch').val() != ''){
			searchForm.kefangleixing ="%" +  $('#kefangleixingSearch').val() + "%";
		}
		getDataList();
	}
	// 获取数据列表
	function getDataList() {
		http("kefangleixing/page","GET",{
			page: pageIndex,
			limit: pageSize,
			sort: sortColumn,
			order: sortOrder,
			kefangleixing : searchForm.kefangleixing,
		},(res)=>{
			if(res.code == 0){
				clear();
				dataList = res.data.list;
				totalPage = res.data.totalPage;
				for(var i = 0;i < dataList.length; i++){ //遍历一下表格数据
					var trow = setDataRow(dataList[i],i); //定义一个方法,返回tr数据
					$('tbody').append(trow);
				}
				pagination(); //渲染翻页组件
				getRoleButtons();// 权限按钮控制
			}
		});
	}
	// 渲染表格数据
	function setDataRow(item,number){
		var row = document.createElement('tr');
		row.setAttribute('class','useOnce');
		var checkbox = document.createElement('td');
		var checkboxDiv = document.createElement('div');
		checkboxDiv.setAttribute("class","custom-control custom-checkbox");
		var checkboxInput = document.createElement('input');
		checkboxInput.setAttribute("class","custom-control-input");
		checkboxInput.setAttribute("type","checkbox");
		checkboxInput.setAttribute('name','chk');
		checkboxInput.setAttribute('value',item.id);
		checkboxInput.setAttribute("id",number);
		checkboxDiv.appendChild(checkboxInput);
		var checkboxLabel = document.createElement('label');
		checkboxLabel.setAttribute("class","custom-control-label");
		checkboxLabel.setAttribute("for",number);
		checkboxDiv.appendChild(checkboxLabel);
		checkbox.appendChild(checkboxDiv);
		row.appendChild(checkbox)

		var kefangleixingCell  = document.createElement('td');
		kefangleixingCell.innerHTML = item.kefangleixing;
		row.appendChild(kefangleixingCell);

		var maxPeopleCell = document.createElement('td');
		maxPeopleCell.innerHTML = item.maxPeople;
		row.appendChild(maxPeopleCell);

		var bedTypeCell = document.createElement('td');
		bedTypeCell.innerHTML = item.bedType;
		row.appendChild(bedTypeCell);

		var roomAreaCell = document.createElement('td');
		roomAreaCell.innerHTML = item.roomArea;
		row.appendChild(roomAreaCell);

		var breakfastIncludedCell = document.createElement('td');
		breakfastIncludedCell.innerHTML = item.breakfastIncluded ? '是' : '否';
		row.appendChild(breakfastIncludedCell);

		var smokingAllowedCell = document.createElement('td');
		smokingAllowedCell.innerHTML = item.smokingAllowed ? '是' : '否';
		row.appendChild(smokingAllowedCell);

		var wifiAvailableCell = document.createElement('td');
		wifiAvailableCell.innerHTML = item.wifiAvailable ? '是' : '否';
		row.appendChild(wifiAvailableCell);

		var priceRangeCell = document.createElement('td');
		priceRangeCell.innerHTML = item.priceRange;
		row.appendChild(priceRangeCell);

		var seasonalDiscountCell = document.createElement('td');
		seasonalDiscountCell.innerHTML = item.seasonalDiscount;
		row.appendChild(seasonalDiscountCell);

		var promotionCell = document.createElement('td');
		promotionCell.innerHTML = item.promotion;
		row.appendChild(promotionCell);

		var btnGroup = document.createElement('td');

		var editBtn = document.createElement('button');
		var editAttr = 'edit(' +  item.id + ')';
		editBtn.setAttribute("type","button");
		editBtn.setAttribute("class","btn btn-warning btn-sm 修改");
		editBtn.setAttribute("onclick",editAttr);
		editBtn.innerHTML = "修改";
		btnGroup.appendChild(editBtn);

		var deleteBtn = document.createElement('button');
		var deleteAttr = 'remove(' +  item.id + ')';
		deleteBtn.setAttribute("type","button");
		deleteBtn.setAttribute("class","btn btn-danger btn-sm 删除");
		deleteBtn.setAttribute("onclick",deleteAttr);
		deleteBtn.innerHTML = "删除";
		btnGroup.appendChild(deleteBtn);

		row.appendChild(btnGroup);
		return row;
	}


	// 翻页
	function pageNumChange(val) {
		if(val == 'pre') {
			pageIndex--;
		}else if(val == 'next'){
			pageIndex++;
		}else{
			pageIndex = val;
		}
		getDataList();
	}
	// 下载
	function download(url){
		window.open(url);
	}
	// 打开新窗口播放媒体
	function mediaPlay(url){
		window.open(url);
	}
	// 渲染翻页组件
	function pagination() {
		var beginIndex = pageIndex;
		var endIndex = pageIndex;
		var point = 4;
		for(var i=0;i<3;i++){
			if(endIndex==totalPage){ break;}
			endIndex++;
			point--;
		}
		for(var i=0;i<3;i++){
			if(beginIndex==1){break;}
			beginIndex--;
			point--;
		}
		if(point>0){
			while (point>0){
				if(endIndex==totalPage){ break;}
				endIndex++;
				point--;
			}
			while (point>0){
				if(beginIndex==1){ break;}
				beginIndex--;
				point--
			}
		}
		if(pageIndex>1){
			$('#tableId_previous').show();
		}else{
			$('#tableId_previous').hide();
		}
		for(var i=beginIndex;i<=endIndex;i++){
			var pageNum = document.createElement('li');
			pageNum.setAttribute('onclick',"pageNumChange("+i+")");
			if(pageIndex == i){
				pageNum.setAttribute('class','paginate_button page-item active useOnce');
			}else{
				pageNum.setAttribute('class','paginate_button page-item useOnce');
			}
			var pageHref = document.createElement('a');
			pageHref.setAttribute('class','page-link');
			pageHref.setAttribute('href','#');
			pageHref.setAttribute('aria-controls','tableId');
			pageHref.setAttribute('data-dt-idx',i);
			pageHref.setAttribute('tabindex',0);
			pageHref.innerHTML = i;
			pageNum.appendChild(pageHref);
			$('#tableId_next').before(pageNum);
		}
		if(pageIndex < totalPage){
			$('#tableId_next').show();
			$('#tableId_next a').attr('data-dt-idx',endIndex+1);
		}else{
			$('#tableId_next').hide();
		}
		var pageNumInfo = "当前第 "+ pageIndex + " 页，共 "+ totalPage + " 页";
		$('#tableId_info').html(pageNumInfo);
	}
	// 跳转到指定页
	function toThatPage(){
		var index = document.getElementById('pageIndexInput').value;
		if(index<0 || index>totalPage){
			alert('请输入正确的页码');
		}else {
			pageNumChange(index);
		}
	}
	// 全选/全不选
	function chooseAll(){
		checkAll = !checkAll;
		var boxs = document.getElementsByName("chk");
		for(var i=0;i<boxs.length;i++){
			boxs[i].checked= checkAll;
		}
	}
	// 批量删除
	function deleteMore(){
		ids = []
		var boxs = document.getElementsByName("chk");
		for(var i=0;i<boxs.length;i++){
			if(boxs[i].checked){
				ids.push(boxs[i].value)
			}
		}
		if(ids.length == 0){
			alert('请勾选要删除的记录');
		}else{
			remove(ids);
		}
	}
	// 删除
	function remove(id) {
		var mymessage = confirm("真的要删除吗？");
		if (mymessage == true) {
			var paramArray = [];
			if (id == ids){
				paramArray = id;
			}else{
				paramArray.push(id);
			}
			httpJson("kefangleixing/delete","POST",paramArray,(res)=>{
				if(res.code == 0){
					getDataList();
					alert('删除成功');
				}
			});
		}
		else {
			alert("已取消操作");
		}
	}
	// 用户登出
	<%@ include file="../../static/logout.jsp"%>

	//修改
	function edit(id) {
		window.sessionStorage.setItem('id', id)
		window.location.href = "add-or-update.jsp"
	}
	//清除会重复渲染的节点
	function clear(){
		var elements = document.getElementsByClassName('useOnce');
		for(var i = elements.length - 1; i >= 0; i--) {
			elements[i].parentNode.removeChild(elements[i]);
		}
	}
	//添加
	function add(){
		window.location.href = "add-or-update.jsp"
	}
	//单列求和
	function getSum(colName){
		http("kefangleixing"+colName,"GET",{
			tableName: "kefangleixing",
			columnName: colName
		},(res)=>{
			if(res.code == 0){
				return res.data.sum;
			}
		});
	}
	// 查看详情
	function detail(id){
		window.sessionStorage.setItem("id", id);
		window.location.href = "info.jsp";
	}

	//跨表
	function crossTable(obj,crossTableName,crossOptAudit,statusColumnName,tips,statusColumnValue){
		window.sessionStorage.setItem('crossTableId',obj.id);
		window.sessionStorage.setItem('crossObj', JSON.stringify(obj));
		window.sessionStorage.setItem('crossTableName',"kefangleixing");
		window.sessionStorage.setItem('statusColumnName',statusColumnName);
		window.sessionStorage.setItem('statusColumnValue',statusColumnValue);
		window.sessionStorage.setItem('tips',tips);
		if(statusColumnName!=''&&!statusColumnName.startsWith("[")) {
			for (var o in obj){
				if(o==statusColumnName && obj[o]==statusColumnValue){
					alert(tips);
					return
				}
			}
		}
		var url = "../"+crossTableName+"/add-or-update.jsp?cross=true";
		window.location.href = url;
	}

	$(document).ready(function() {
		//激活翻页按钮
		$('#tableId_previous').attr('class','paginate_button page-item previous')
		$('#tableId_next').attr('class','paginate_button page-item next')
		//隐藏原生搜索框
		$('#tableId_filter').hide()
		//设置右上角用户名
		$('.dropdown-menu h5').html(window.sessionStorage.getItem('username')+'('+window.sessionStorage.getItem('role')+')')
		//设置项目名
		$('.sidebar-header h3 a').html(projectName)
		setMenu();
		init();
		getDataList();
		<%@ include file="../../static/myInfo.js"%>
	});
</script>
</body>

</html>
</style>